<template>
  <div class="home-news">
      <div class="news">
          <div class="icon">
              <img src="@/assets/images/news-icon.png" alt="">
          </div>
          <ul class="news-list" ref="list" :class="{trans:flag}">
              <li v-for="newsListData in newsListDatas" :key="newsListData.id">{{newsListData.title}}</li>
          </ul>
          <div class="arr-icon">
              <i class="iconfont icon-jiantou2"></i>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            newsListDatas:[{
                id:1,
                title:"新闻001"
            },{
                id:2,
                title:"新闻002"
            },{
                id:3,
                title:"新闻003"
            },{
                id:4,
                title:"新闻004"
            }],
            timer:null,
            flag:false
        }
    },
    methods:{
        scrollNewsFn(){
            let oUl=this.$refs.list  //获取ul DOM元素，在ul标签上边添加一个ref属性
            //console.log(oUl);
            oUl.style.top="-3.6rem"
            this.flag=!this.flag
            setTimeout(()=>{
                this.newsListDatas.push(this.newsListDatas[0]); //将第一条新闻添加到数组的末尾
                this.newsListDatas.shift()  //将第一条数据删除
                oUl.style.top="0"
                this.flag=!this.flag
            },500)
        }
    },
    mounted(){
        this.timer=setInterval(this.scrollNewsFn,2000)
    },
    destroyed(){  //组件销毁的生命周期
        clearInterval(this.timer)
    }
}
</script>

<style lang="less">
    .home-news{
        .news{
            width: 100%;
            display: flex;
            height: 3.6rem;
            overflow: hidden;
            justify-content:space-between;
            position: relative;
            img{
                height: 3rem;
                margin-left: 1rem;
            }
            .news-list{
                width: 100%;
                position: absolute;
                top: 0;
                left: 8rem;
                
                li{
                    line-height: 3.6rem;
                    text-indent: 1rem;
                }
            }
            .trans{
                transition: all 0.5s;
            }
            .arr-icon{
                line-height: 3.6rem;
                margin-right: 1rem;
            }
        }
    }
</style>